/**
 * 运行在node 中，支持不同类型的配置方式，提供智能提示。
   首页打开，要把很多js 全部下载，导致代码过大，首屏慢： 代码分割： 异步组件/异步引入
   但是也增加了http 数量， App.js 但是也浪费了请求， 又大，后面又异步使用
   import('./a.js').then((res)=>{
	res.default
	})
	require.ensure([],()=>{}, 
	let b =  require('a.js')
	b.default
	)


	多入口：重复加载同一段代码逻辑  浏览器缓存


	第三方库 单独打包 runtime  - vendor  

	hash 值得一个问题： 浏览器加载资源后，会缓存： 
 */
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const RemoveCommentPlugin = require('./remove-comments-plugins')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const resolveFunc = (dir) => {
	return path.resolve(__dirname, dir)
}

module.exports = {
	entry: './src/index.js',
	// entry: './src/index.css',
	context: process.cwd(),
	mode: 'none', //
	// mode: 'development', //
	output: {
		path: resolveFunc('dist'),
		filename: '[name][chunkhash:8].bundle.js'
		// filename: '[name][hash:8].bundle.js'
	},
	watch: true,
	watchOptions: {
		ignored: /node_modules/,
		aggregateTimeout: 300,
		poll: 1000
	},
	// 其他配置选项
	optimization: {
		// 模块只导出被使用的成员
		// usedExports: true,
		// 压缩输出
		// minimize: true,
		// 合并 每一个模块到一个函数
		concatenateModules: true,
		//
		sideEffects: false,
		splitChunks: {
			// include all types of chunks
			chunks: 'all', // 同步/ 异步
			minChunks: 1, // 最小模块数
			minSize: 0, // 最小代码大小, 不要浪费http 请求
			// 分割规则
			cacheGroups: {
				vendor: {
					test: /[\\/]node_modules[\\/]/,
					filename: 'vendors.js',
					chunks: 'all',
					minChunks: 1
				},
				common: {
					filename: 'common.[chunkhash].js',
					minChunks: 1,
					name: 'common',
					chunks: 'all'
				}
			}
		},
		runtimeChunk: {
			name: (entrypoint) => `runtime~${entrypoint.name}`
		}
	},
	devServer: {
		static: {
			directory: resolveFunc('dist')
		},
		proxy: [
			{
				context: ['/api'],
				target: 'https://api.github.com/',
				changeOrigin: true,
				pathRewrite: { '^/api': '' }
			}
		],
		// proxy: {
		// 	'/api': {
		// 		target: 'https://api.github.com/',
		// 		changeOrigin: true,
		// 		pathRewrite: { '^/api': '' }
		// 	}
		// }
		// proxy: {
		// 	'/api': {
		// 		target: 'http://localhost:3000',
		// 		secure: false,
		// 		pathRewrite: { '^/api': '' }
		// 	}
		// },
		port: 8080,
		hot: true // 多了这一行
	},
	// 热更新

	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			inject: 'body',
			minify: {
				collapseWhitespace: true, // 打成一行
				removeComments: true, // 移除注视
				removeEmptyAttributes: true // 移除空属性
			}
		}),
		new webpack.HotModuleReplacementPlugin(),
		new CleanWebpackPlugin(), // 删除上一次dist
		new RemoveCommentPlugin()
		// new BundleAnalyzerPlugin()
	],

	// loader 本质： 本质是一个方法，接收要处理的资源处理完后给出内容，作为打包结果

	module: {
		rules: [
			{
				test: /\.css$/, // 文件路径匹配
				use: [
					{ loader: 'style-loader' }, // 将css 插入到 mini-css-extract-plugin
					{
						loader: 'css-loader', // 让webpack 认识他
						options: {
							modules: true
						}
					}
					// { loader: 'sass-loader' }
				]
			},
			// {
			// 	test: /\.less$/,
			// 	use: [minimize.loader, 'style-loader', 'css-loader', 'less-loader']
			// },
			// {
			// 	test: /\.(jpg|jpeg|png|gif|svg)$/,
			// 	loader: 'url-loader', // 转base64
			// 	options: {
			// 		limit: 5000, // 5kb 把小的图片转base 64  首页加载速度会限制
			// 		name: '[name].[hash].[ext]'
			// 	}
			// },
			{
				test: /\.(jpg|jpeg|png|gif|svg)$/,
				type: 'asset', // asset/  inline-asset 所有转base / resource  转file
				parser: {
					dataUrlCondition: {
						maxSize: 5000
					}
				},
				generator: {
					filename: '[name].[hash].[ext]'
				}
			},
			{
				test: /\.js$/, // 匹配 JavaScript 文件
				// use: [
				// 	{
				// 		loader: resolveFunc('./console-loader.js'), // 指定你的 Loader 路径
				// 		options: {}
				// 	},
				// 	{
				// 		use: resolveFunc('./toUppercase-loader.js'),
				// 		options: {}
				// 	}
				// ]
				use: {
					loader: path.resolve(__dirname, './console-loader.js'), // 指定 console-loader 的路径
					options: {
						// 可选的 loader 选项
					}
				}
				// {
				// 	loader: path.resolve(__dirname, './toUppercase-loader.js'),
				// 	options: {
				// 		// 可选的 loader 选项
				// 		transform: 'capitalize'
				// 	}
				// }
			}
			// {
			// 	test: /\.(png|svg|jpg|jpeg|gif)$/i,
			// 	type: 'asset/resource'
			// }
		]
	},
	// devtool: 'eval'
	devtool: 'source-map',
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './src')
		},
		extensions: ['.js', '.json', '.vue', '.ts', '.tsx']
	}
}
